import 'package:flutter/material.dart';
import 'package:flutter_rating_bar/flutter_rating_bar.dart';
import 'package:shoes_shop/api/api.dart';
import 'package:shoes_shop/core/const.dart';
import 'package:shoes_shop/core/flutter_icons.dart';
import 'package:shoes_shop/core/utils.dart';
import 'package:shoes_shop/models/shoe_model.dart';
import 'package:shoes_shop/widgets/app_clipper.dart';
import 'dart:math' as math;

class DetailPage extends StatefulWidget {
  final ShoeModelData shoeModel;
  final String tag;
  DetailPage(this.shoeModel, this.tag);

  @override
  _DetailPageState createState() => _DetailPageState();
}

class _DetailPageState extends State<DetailPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor:
          Color(int.parse('FF${widget.shoeModel.color}', radix: 16)),
      appBar: AppBar(
        backgroundColor:
            Color(int.parse('FF${widget.shoeModel.color}', radix: 16)),
        // backgroundColor: AppColors.blueColor,
        elevation: 0,
        // title: Text("商品详情"),
        centerTitle: true,
        leading: IconButton(
          icon: Icon(FlutterIcons.left_open_1),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ),
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: Stack(
          children: [
            Positioned(
              bottom: 0,
              child: Container(
                height: MediaQuery.of(context).size.height * .75,
                width: MediaQuery.of(context).size.width,
                child: ClipPath(
                  clipper: AppClipper(
                    cornerSize: 50,
                    diagonalHeight: 180,
                    roundedBottom: false,
                  ),
                  child: Container(
                    color: Colors.white,
                    padding: EdgeInsets.only(top: 180, left: 16, right: 16),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          width: 300,
                          child: Text(
                            "${widget.shoeModel.title}",
                            style: TextStyle(fontSize: 32),
                          ),
                        ),
                        SizedBox(height: 16),
                        _buildRating(),
                        SizedBox(height: 24),
                        Text(
                          "描述",
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 18,
                          ),
                        ),
                        SizedBox(height: 16),
                        Text(
                          "${widget.shoeModel.content}",
                          style: TextStyle(color: Colors.black38),
                        ),
                        SizedBox(height: 24),
                        Text(
                          "颜色选择",
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 18,
                          ),
                        ),
                        SizedBox(height: 16),
                        Row(
                          children: [
                            _buildColorOption(AppColors.blueColor),
                            _buildColorOption(AppColors.fadeBlueColor),
                            _buildColorOption(AppColors.orangeColor),
                            _buildColorOption(AppColors.redColor),
                          ],
                        )
                      ],
                    ),
                  ),
                ),
              ),
            ),
            Positioned(
              bottom: 0,
              child: _buildBottom(),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 50),
              child: Hero(
                tag: "${widget.tag}${widget.shoeModel.sId}",
                child: Transform.rotate(
                  angle: -math.pi / 7,
                  child: Image.network(
                    widget.shoeModel.imgs[0],
                    width: MediaQuery.of(context).size.width * .85,
                  ),
                  // Image(
                  //   width: MediaQuery.of(context).size.width * .85,
                  //   image: AssetImage(
                  //     "assets/${widget.shoeModel.imgs[0]}",
                  //   ),
                  // ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget _buildBottom() {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 16, horizontal: 32),
      width: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(30),
            topRight: Radius.circular(30),
          ),
          boxShadow: [
            BoxShadow(
              color: Colors.black12,
              spreadRadius: 1,
              blurRadius: 10,
            )
          ]),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                "价格",
                style: TextStyle(color: Colors.black26),
              ),
              Text(
                "¥${widget.shoeModel.price}",
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 28,
                ),
              )
            ],
          ),
          Container(
            padding: EdgeInsets.symmetric(
              vertical: 16,
              horizontal: 50,
            ),
            decoration: BoxDecoration(
              color: AppColors.fadeBlueColor,
              borderRadius: BorderRadius.all(
                Radius.circular(50),
              ),
            ),
            child: InkWell(
              child: Text(
                "加入购物车",
                style: TextStyle(color: Colors.white),
              ),
              onTap: () async{
                Map res = await addToCart(widget.shoeModel, context);
                  showToast(res['message']);
              },
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildColorOption(Color color) {
    return Container(
      width: 20,
      height: 20,
      margin: EdgeInsets.only(right: 8),
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.all(
          Radius.circular(50),
        ),
      ),
    );
  }

  Widget _buildRating() {
    return Row(
      children: [
        RatingBar.builder(
          initialRating: 3,
          minRating: 1,
          direction: Axis.horizontal,
          allowHalfRating: true,
          itemCount: 5,
          itemSize: 20,
          itemPadding: EdgeInsets.symmetric(horizontal: 2.0),
          itemBuilder: (context, _) => Icon(
            Icons.star,
            color: Colors.amber,
          ),
          onRatingUpdate: (rating) {
            print(rating);
          },
        ),
        SizedBox(width: 16),
        Text(
          "134 评论",
          style: TextStyle(color: Colors.black26),
        ),
      ],
    );
  }
}
